<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!-- <script src="https://cdn.goeasy.io/goeasy-im-1.0.7.js"></script> -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/peerjs@0.3.20/dist/peer.min.js"></script>
    <!-- <script src="js/restapi.js"></script>-->
    <script src="layui/layui.js"></script>
    <!-- <script src="js/adapter.js"></script> -->
    <script src="js/controller.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style type="text/css">
        body{
            margin: 0px;
        }
        .zhezhao{
            position: fixed;
            left: 0px;
            top: 0px;
            background: #000;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            display:none;
        }
        .tankuang{
            position: relative;
            background: #fff;
            width: 50%;
            height: 80%;
            border-radius: 5px;
            margin: 5% auto;
        }
        #header{
            height: 40px;
        }
        #header-right{
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 5px;
            background: red;
            color: #fff;
            right: 5px;
            top: 5px;
            text-align: center;
        } 
        .layui-icon{
            font-size: 25px; 
        }
        .friend-item:first-child{
            margin-top: 65px;
        } 
        .videos{
            max-width: 350px;
            height: 600px;
            display: block;
            position: relative;
            /*border: 1px solid #000000;*/
            margin-top:20px; 
        }
        .localVideo{
            max-width: 150px;
            
            height: auto;
            position: absolute;
            top:0;
            right: 0;
            z-index: 5;
        }
        .remoteVideo{
            width:100%;
            display: block;
            height:auto;  
            position: absolute;
            z-index: -1;
        }
    </style>
</head>
<body>
<div id="app">
    <!--登录界面-->
    <div class="login" style="display: block;">
        <div class="login-box" id="login-box">
            <h2 class="login-box-title">All In IM</h2>
            <div class="login-box-input">
                <div class="login-input-box">
                    <input type="text" placeholder="请输入账号" name="username" class="login-input" id="username" />
                </div>
                <div class="login-input-box">
                    <input type="password" placeholder="请输入密码" name="password" class="login-input" id="password" />
                </div>
                <span class="error-info" onClick="toRegister()">去注册</span>
                <div class="login-btn-box">
                    <div class="login-btn-box-info" onclick="userLogin()">
                        <button type="button"  class="login-btn">登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="register" style="display: none;">
        <div class="login-box" id="login-box">
            <h2 class="login-box-title">GoEasy IM</h2>
            <div class="login-box-input">
                <div class="login-input-box">
                    <input type="text" placeholder="请输入账号" name="username" class="login-input" id="registerUser" />
                </div>
                <div class="login-input-box">
                    <input type="password" placeholder="请输入密码" name="password" class="login-input" id="registerPasswd" />
                </div>
                <div class="login-input-box">
                    <input type="password" placeholder="请输入确认密码" name="password" class="login-input" id="registerSurePassword" />
                </div>
                <span class="error-info" onClick="toLogin()">去登陆</span>
                <div class="login-btn-box">
                    <div class="login-btn-box-info" onclick="register()">
                        <button type="button"  class="login-btn">登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 好友列表 -->
    <div id="friends-box" style="display: none;">
        <div class="friends-box-title">
            <i class="layui-icon layui-icon-reply-fill" onClick="showApply()" style="float: left;font-size: 30px; color:white"></i>
            <span>联系人</span>
            <i class="layui-icon layui-icon-add-1" onClick="toSearch()" style="font-size: 30px; color:white;float: right;"></i>
        </div>
        <!--当前登录用户--> 
        <!-- <div class="current-user-box"  >
            <div class="current-user-icon" id="current-user-icon">
                <img src="#" class="user-avatar" id="current-user-avatar"/> 
                <div class="current-user-name" id="current-user-name"></div>
            </div>
        </div> -->
        <div id="friend-list">
            <!--好友列表-->
        </div> 
    </div>
    <!--私聊 聊天框-->
    <div class="chat-box" id="chat-box" style="display: none;">
        <div class="chat-box-current-friend">
            <!--当前聊天的好友-->
            <div class="exit-current-chat-box" id="exit-current-chat-box" onclick="privateChatBackToContacts()">
                <img src="images/Arrow-Left.png" class="exit-icon"/>
            </div>
            <span class="current-friend-name"></span>
        </div>
        <div class="chat-box-content" id="private-box">
            <div id="top" onclick="loadPrivateHistory()">加载更多历史消息</div>
            <!-- 历史消息或者新发消息 -->
            <div id="chat-box-content"></div>
        </div>
        <div class="chat-send-box">
            <div class="chat-send-box-info">
                <div class="input-box">
                    <input type="text" placeholder="发送消息" class="send-input-box" id="send-input-box"/>
                </div>
                <div class="send-box-btn">
                    <i class="layui-icon layui-icon-video" id="faceToChat"></i> 
                    <i class="layui-icon layui-icon-release" id="sendMessageButton"></i>
                </div>
            </div>
        </div>
    </div>
 
    <!--所有需要的模板-->
    <div style="display: none;">
        <!--好友列表模板-->
        <div class="friend-item" id="friend-item-template">
            <div class="friend-item-box">
                <img src="#" class="friend-avatar-desaturate friend-avatar"/>
                <span class="friend-name"></span>
            </div>
            <div class="friend-item-message-badge">
                <span class="message-count">0</span>
            </div>
        </div>
        <div class="friend-item" id="friend-apply-template">
            <div class="friend-item-box">
                <img src="#" class="friend-avatar-desaturate friend-avatar"/>
                <span class="friend-name"></span>
            </div>
            <div class="friend-apply-badge">
                <button onclick="Auditors(this)" data-value="" class="layui-btn layui-btn-radius layui-btn-normal">添加</button>
            </div>
        </div>
        <!--展示好友发送的消息模板-->
        <div class="chat-box-friend-message-template" id="chat-box-friend-message-template">
            <img class="user-avatar"/>
            <div class="chat-left-box">
                <li class="chat-box-friend-content">
                    <span class="chat-message chat-message-friend"></span>
                </li>
                <div class="left-triangle"></div>
            </div>
        </div>
        <!--展示自己发送的消息模板-->
        <div class="chat-box-self-message-template" id="chat-box-self-message-template">
            <div class="chat-right-box">
                <div class="right-triangle"></div>
                <li class="chat-box-self-content">
                    <span class="chat-message chat-message-self"></span>
                </li>
            </div>
            <img class="user-avatar"/>
        </div>
    </div>
    <div class="toast">

    </div>
</div>
<div class="searchContans" style="display:none">
    <div class="layui-form-item"> 
        <div class="layui-input-block" style="margin-left:0px">
            <input style="width: 70%;float: left;" type="text" id="searchPeopleName" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
            <button class="layui-btn layui-btn-radius layui-btn-normal" onClick="searchContacts()"> 搜索</button>
        </div> 
    </div> 
    <div class="appendSearch"> </div>
</div> 
<div class="completeRecord" style="display:none">
   
</div> 
 
<div class="zhezhao" id='zhezhao'>
    <div class="tankuang">
        <div id="header">
            <div class='videos'>
                
                <video id="localVideo" class="localVideo"  autoplay playsinline style=""></video>
                <video id="remoteVideo" class="remoteVideo" autoplay playsinline style=""></video>
            <div>
                <div id="header-right" onclick="hidder()">x</div>
        </div>
        
            <span>连线中</span>
            <div id="header-right" onclick="hidder()">x</div>
        </div>
    </div>
</div>

</body>
</html>
